<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0;" name="viewport">
    <meta charset="UTF-8">
    <title>上传文件</title>
</head>
<body>

    <p>${message}</p>

    上传进度: <p class="info"></p>

    <progress class="bar" value="1"></progress>

    <p class="response"></p>

    <form method="post" enctype="multipart/form-data" action="/file/upload">
        <input type="file" name="file">
        <input type="submit" name="上传">
    </form>

<script>
    let form = document.querySelector("form");
    let info = document.querySelector(".info"); //百分数
    let bar = document.querySelector(".bar");   // 进度条
    let response = document.querySelector(".response");   // 进度条

    bar.style.width = "0"

    form.onsubmit = function(e) {
        e.preventDefault();

        // 2.收集表单数据：大段文字 和 文件（图片、视频、压缩包）
        let fd = new FormData(this);


        let xhr = new XMLHttpRequest();
        xhr.open("post", "http://192.168.2.115:10008/file/upload");


        // 上传进度事件：必须放在xhr.send();语法规定
        xhr.upload.onprogress = function(e) {
            // e.lengthComputable  文件是否正在上传
            // e.loaded            已经上传的大小
            // e.total             文件的总大小
            let numb = e.loaded / e.total * 100;
            info.innerText = numb.toFixed(2) + "%";

            // 设置：计算结果设置宽度 %
            bar.style.width = numb.toFixed(2) + "%"
        }

        xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
            if (xhr.readyState === 4) {  //监听readyState状态
                if (xhr.status === 200 || xhr.status === 0) {  //监听HTTP状态码
                    response.innerHTML = xhr.responseText
                }
            }
        }

        xhr.send(fd); // 发送请求，展示请求完成和状态！
    }

</script>

</body>
</html>
